<template>
  <div class="container">
    <el-page-header title="返回博文信息管理" content="添加博文" @back="backOff" />
    <div class="form-box">
      <el-form ref="form" :model="blogForm" label-width="80px" label-position="top">
        <el-card class="form-card">
          <span class="form-text">发布文章</span>
          <el-row align="center" style="margin-top:1vh">
            <el-col :span="24">
              <el-form-item label="">
                <input v-model="blogForm.name" placeholder="请输入文章标题" class="form-input-title">
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="">
                <mavon-editor v-model="blogForm.value" class="editor" @imgAdd="addImg" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <el-form ref="form" :model="blogForm" label-width="100px" label-position="left">
        <el-card class="form-card">
          <el-row align="center" style="margin-top:5vh">
            <el-col :span="24">
              <el-form-item label="封面&摘要:">
                <el-radio v-model="blogForm.coverStatus" label="0">单图</el-radio>
                <el-radio v-model="blogForm.coverStatus" label="1">无封面</el-radio>
              </el-form-item>
              <div class="form-text_upload">
                <div v-if="blogForm.coverStatus === '0'" class="form-text_upload-upload">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :auto-upload="true"
                    :show-file-list="false"
                    :http-request="uploadCover"
                  >
                    <img v-if="blogForm.cover" :src="blogForm.cover" alt="" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </div>
                <div class="form-text_upload-text">
                  <el-input
                    v-model="blogForm.remark"
                    type="textarea"
                    class="form-input-textarea"
                    :rows="6"
                    resize="none"
                    placeholder="摘要(必填) : 会在推荐、列表等场景暴露,帮助读者快速了解内容,支持一键将正文前256字符摘要文本框"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文章类型:" style="margin-top:2vh">
                <el-cascader
                  :options="typeSelectors"
                  :props="{ multiple: true, checkStrictly: true, value: 'id', label:'type'}"
                  collapse-tags
                  clearable
                  placeholder="请选择文章类型"
                  @change="changeDataType"
                />
                <el-tag
                  v-for="item in typeObj.TypeTags"
                  :key="item.label"
                  :type="item.type"
                  style="margin-left: 1vh"
                  effect="plain"
                >
                  {{ item.label }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分类专栏:" style="margin-top:2vh">
                <el-tag
                  :key="tag"
                  v-for="tag in classifys"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inp"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="enterInput"
                  @blur="loseInput"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="openInput">+ 添加分类专栏</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
import { upload } from '@/api/file'
import { queryBlogType, queryList } from '@/api/article'

export default {
  data() {
    return {
      inp: '',
      inputVisible: false,
      blogForm: {
        coverStatus: '0',
        cover: ''
      },
      classifys: [],
      typeList: [],
      typeObj: {
        TypeTags: [],
        ids: []
      },
      files: [],
      typeSelectors: []
    }
  },
  created() {
    this.queryTypeList()
    this.typeCascader()
  },
  methods: {
    // 页头回退
    backOff() {
      this.$router.go(-1)
    },
    // markdown上传图片
    async addImg(pos, $file) {
      const document = new FormData()
      document.append('file', $file)
      const res = await upload(document)
      const file = res.data
      this.files.push(file)
    },
    // 博文类型下拉框改变触发
    changeDataType(value) {
      console.log('changeDataType id =>' + value)
      this.typeObj.ids = []
      this.typeObj.TypeTags = []
      const values = value.toString().split(',')
      values.forEach(id => {
        this.typeObj.ids.push(id)
        const typeArr = this.typeList.filter(obj => obj.id === Number(id))
        if (typeArr.length > 0) {
          const type = typeArr[0]
          const tagList = {
            type: 'warning',
            label: type.type
          }
          this.typeObj.TypeTags.push(tagList)
        }
      })
    },
    // 上传封面
    uploadCover(params) {
      console.log(params)
      const document = new FormData()
      document.append('file', params.file)
      upload(document).then(async(res) => {
        this.blogForm.cover = res.data.url
        console.log(res)
      })
    },
    // 博文类型下拉框
    async typeCascader() {
      const params = {
        current: 1,
        size: 10000
      }
      const res = await queryBlogType(params)
      console.log(res)
      this.typeSelectors = res.data.records
    },
    // 返回全部博文类型列表
    async queryTypeList() {
      const res = await queryList()
      this.typeList = res.data
    },
    // 打开输入库
    openInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 输入框失去焦点 触发
    loseInput() {
      this.inp = ''
      this.inputVisible = false
    },
    // 点击 回车键 引发输入框变更
    enterInput() {
      if (this.inp === '') {
        this.$message({
          message: '请勿输入空字符串',
          type: 'warning'
        })
        return
      }
      this.classifys.push(this.inp)
      this.inp = ''
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleClose(tag) {
      this.classifys.splice(this.classifys.indexOf(tag), 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 30px;
  min-height: calc(96vh);
  background: #f2f3f7;
  position: relative;
}
.form {
  &-card {
    margin: 2vh 40vh 0 40vh;
    padding: 1vh 10vh 0 10vh
  }
  &-text{
    font-size:30px;
  }
  &-input {
    &-title {
      border: 0;
      width: 100%;
      height: 5vh;
      border-radius: 0;
      border-bottom: 1px solid #ccc;
      outline:none
    }
    &-routine{
      width: 320px
    }
    &-textarea {
      width: 50%;
   }
  }
  &-text_upload{
    margin-left:11vh;
    &-upload {
      float:left;
      width:145px;
      height:140px;
      margin-right:2vh
    }
    &-text {
      float:left;
      width:70%;
      height:145px
    }
  }
}
::v-deep .el-page-header{
  margin-left: 1vh;
  height: 5vh;
  line-height: 5vh
}
.editor {
  width: 100%;
  min-height:40vh
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  border: 1px dashed #d9d9d9
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
